{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
        <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" id="conf_form" >
            <!-- #section:elements.form -->
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Agent'|trans }}</label>
                <div class="col-sm-7">
                    <span class="col-xs-10 col-sm-5" id="agent">{{ info.agName }}  {{ info.agNum }}</span>
                    <input type="hidden" value="{{ info.userId }}" name="user_id" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Required skills group monitoring'|trans }}</label>
                <div class="col-sm-7">
                    <select multiple="" class="chosen-select" data-placeholder="{{ 'Please select'|trans }}" id="que_select" name="que[]">
                        {% for key,que in ques %}
                        <option value="{{ key }}" {% if key in info.monitorQueues %}selected{% endif %} >{{ que }}</option>
                        {% endfor %}>
                    </select>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom"
                          data-content="{{ 'Artificial line number index data source configuration monitoring page display'|trans }}" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Need to display the skill set of information alone'|trans }}</label>
                <div class="col-sm-7">
                    <select multiple=""  class="chosen-select" id="only_que" data-placeholder="{{ 'Please select'|trans }}" name="separate_que[]">
                        {% for key,que in ques %}
                            {% if key in info.monitorQueues %}
                                 <option value="{{ key }}"  {% if key in info.separateQueues %}selected {% endif %}>{{ que }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom"
                          data-content="{{ 'Configuration need to display the skill set monitoring index in monitoring the separate page'|trans }}" title="" data-original-title="">?</span>
                </div>
            </div>
            {#<div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Whether to display the IVR monitoring information'|trans }}</label>
                <div class="col-sm-7">
                    <input id="ivr_show" type="checkbox" onclick="showIvr()" value="1" class="u5_input" name="show_ivr" {% if info.ifMonitorIvrInfo %}checked{% endif %} /><span>{{ 'Configure whether to display the IVR line number and IVR give up the number'|trans }}</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Relay number management'|trans }}</label>
                <div class="col-sm-7">
                    <select multiple=""  class="chosen-select" data-placeholder="{{ 'Please select'|trans }}" name="trunk[]" id="truk">
                        {% for pho in phones %}
                            <option value="{{ pho }}" {% if pho in info.trunkPhones %}selected{% endif %} >{{ pho }}</option>
                        {% endfor %}>
                    </select>
                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom"
                      data-content="{{ 'The configuration of the IVR into the line numbers and the IVR stop counting data acquisition source relay number'|trans }}" title="" data-original-title="">?</span>
                </div>
            </div>#}
            {{ create(path('icsoc_monitor_conf_monitor')) }}
        </form>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@chosen_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $(document).ready(function(){
            $('.chosen-select').chosen();
            $(window).on('resize.chosen', function() {
                var w = $('#agent').width()+24;
                $('.chosen-select').next().css({'width':w});
                $('.chosen-select').addClass('tag-input-style')
            }).trigger('resize.chosen');

            $("#que_select").on('change',function(e, params){
                if (params.selected) {
                    var v = params.selected;
                    var text = $("#que_select option[value="+v+"]").text();
                    var option ="<option value='"+v+"'>"+text+"</option>";
                    $('#only_que').append(option);
                } else {
                    var v = params.deselected;
                    $("#que_select option[value='"+v+"']");
                    $("#only_que option[value='"+v+"']").remove();
                }
                $('#only_que').trigger('chosen:updated');
            });
            showIvr();
        });
        /**
         * 是否展示中继号
         */
        function showIvr()
        {
            var isCheck = $("#ivr_show").is(':checked');
            if (isCheck)
            {
                $("#truk_chosen").css('display','');
            } else {
                $("#truk_chosen").css('display','none');
            }
        }
    </script>
{% endblock %}